<template>
	<view>
		<view class="backgrimg">
			<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="300rpx"
				@click="click"></u--image>
		</view>
		<view class="parent">
			<view class="head">
				<view class="u-avatar">
					<u-avatar shape="square" size="80"
						:src="loginStatus ? userInfo.image : 'https://cdn.uviewui.com/uview/album/1.jpg'">
					</u-avatar>
					<view class="seting">
						<u-icon name="edit-pen-fill" color="#2979ff" size="28"></u-icon>
						<text @click="gotocompile">编辑资料</text>
						<!-- <u--text bold size="35rpx" text="编辑资料"></u--text> -->
					</view>
					<view class="seting1">
						<u-icon name="setting-fill" color="#2979ff" size="28"></u-icon>
					</view>
				</view>
				<view style="width: 100%;">
					<text style="margin-left: 70rpx;">{{userInfo.userName}}</text>
				</view>


				<view class="gz">
					<view class="gz1">
						<text>关注</text>
					</view>

					<view class="gz1">
						<text>粉丝</text>
					</view>

				</view>
			</view>
		</view>
		<view style="margin-top: 40rpx; width: 80%;text-align: center;">
			<u-button text="退出登陆" @click="Logout()"></u-button>
		</view>
		<tab-bar ref="tabBar"></tab-bar>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		data() {
			return {

			};
		},
		methods: {
			...mapMutations(['logout']),
			toMY() {
				this.$refs.tabBar.switchTab({
					pagePath: 'pages/home/home'
				})
			},
			Logout() {
				this.logout()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			gotocompile() {
				uni.navigateTo({
					url: "/pages/compile/compile"
				})
			}
		},
	}
</script>

<style lang="scss">
	.backgrimg {
		height: 300rpx;
		width: 100%;
	}

	.parent {
		display: flex;
		// justify-content: center;
	}

	.head {
		background-color: #fff;
		z-index: 1;
		margin-top: -20rpx;
		width: 100%;
		height: 300rpx;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
		border-radius: 20rpx;

		.u-avatar {
			display: inline-flex;
			margin-top: -30rpx;
			margin-left: 20rpx;
		}
	}

	.u-avatar__image--square.data-v-d3651d6e {
		z-index: 1;
	}

	.seting {
		border-radius: 30rpx;
		border: 1rpx #878787 solid;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #878787;
		margin-top: 40rpx;
		margin-left: 210rpx;
		display: inline-flex;
	}

	.seting1 {
		border-radius: 30rpx;
		border: 1rpx #878787 solid;
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #878787;
		margin-top: 40rpx;
		margin-left: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gz {
		width: 500rpx;
		height: 100rpx;
		display: flex;
		margin: 5rpx;
	}

	.gz1 {
		margin: 14px;
	}
</style>